<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>奇趣头像</title>
  <style>
    body {
      text-align: center;
      margin: 100px auto;
    }

    img {
      --s: 200px;
      --c1: #000;
      --c2: #ecd078;
      --b: 5px;
      --f: 1;
      --bgOptioin: content-box no-repeat center/ calc(100%/var(--f)) 100%;
      --shink: calc((var(--s) / var(--f) - var(--s)) / 2 - var(--b));

      width: var(--s);
      height: var(--s);
      cursor: pointer;
      transition: .5s;
      padding-top: 100px;
      outline: var(--b) solid var(--c1);
      outline-offset: var(--shink);
      border-radius: 0 0 99px 99px;
      transform: scale(var(--f));
      background: radial-gradient(
        circle closest-side,
        var(--c2) calc(99% - var(--b)),
        var(--c1) calc(100% - var(--b)),
        var(--c1) 99%,
        transparent 100%
      ) 
      var(--bgOptioin);

      mask: linear-gradient(#000 0 0)
      no-repeat  center
      calc(0px - var(--shink)) / calc(99% / var(--f) - 2 * var(--b)) 50%,
      radial-gradient(
        circle closest-side,
      #000 99%, 
        transparent
      ) 
      var(--bgOptioin);
    }

    img:hover {
      --f: 1.1;
    }
  </style>
</head>
<body>
    <img src="../images/avatar39.png" alt="">
</body>
</html>